<template>
    <div class="app-container">
        <el-row>
            <div :span="7" v-for="(v, i) in list" :key="i" class="user-list">
                <el-card :body-style="{ padding: '0px' }">
                    <div class="avatar-wrapper">
                        <img fit="contain" :src="getImg(v.avatar) + '?imageView2/1/w/80/h/80'" class="user-avatar">
                    </div>
                    <div style="padding: 14px;">
                        <div>昵称:{{ v.nickname }}</div>
                        <div>QQ:{{ v.qq }}</div>
                        <div><a target="_blank" :href="'https://space.bilibili.com/' + v.bilibili_uid"
                                style="color: blue;text-decoration:underline">b站uid:{{ v.bilibili_uid }}</a> </div>
                        <div>职务:{{ v.group_name }}</div>
                        <div>状态:{{ v.state_name }}</div>

                    </div>
                </el-card>
            </div>
        </el-row>

        <el-pagination @current-change="handleCurrentChange" :current-page="page" layout="prev, pager, next" :total="total">
        </el-pagination>

    </div>
</template>
<script>
import userApi from "@/api/system/user";
import { getImg, isEmpty } from "@/api/help_func";


export default {
    name: "system-user-list",
    data() {
        return {
            page: 1,
            limit: 10,
            list: [],
            total: 0,
            getImg: getImg,

        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        async getUserList() {
            let sdata = {
                page: this.page,
                limit: this.limit
            }
            let res = await userApi.list(sdata);
            this.list = [...res.data];
            this.total = res.count;
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getUserList();
        }

    }
}
</script>
<style lang="scss" scoped>
.avatar-wrapper {
    margin-top: 5px;
    position: relative;
    text-align: center;
    width: 20rem;
    height: 15rem;

    .user-avatar {
        cursor: pointer;
        width: 15rem;
        height: 15rem;
        border-radius: 10px;
    }
}

.user-list {
    width: 20rem;
    height: 100%;
    float: left;
    margin: 10px;
}
</style>